<script setup lang="ts">

const props = defineProps({
  data: {
    type: Object,
  },
  merType: {
    type: String,
  },
  imageIds: {
    type: [String],
  }, 
})

interface Option {
  text: string
  value: string
}

const options = ref<Option[]>([
  { text: '身份证', value: '01' },
  // { text: '军官证', value: '02' },
  // { text: '护照', value: '03' },
  // { text: '港澳居民来往内地通行证（回乡证）', value: '04' },
  // { text: '台湾同胞来往内地通行证（台胞证）', value: '05' },
  // { text: '警官证', value: '06' },
  // { text: '士兵证', value: '07' },
  // { text: '户口簿', value: '08' },
  // { text: '临时身份证', value: '09' },
  // { text: '外国人永久居留身份证', value: '10' },
  // { text: '其他证件', value: '99' },
])

const isOptions = ref<Option[]>([
  { text: '是', value: '1' },
  { text: '否', value: '0' },
])
</script>

<template>
  <nut-cell-group v-if="props.data" title="经营者信息">
    <image-list :image-ids="imageIds" />
    <option-select
      :model-value="props.data.respCertType"
      title="证件类型"
      readonly
      :options="options"
    />
    <nut-cell title="姓名" :desc="props.data.respCertName" />
    <nut-cell title="证件号码" :desc="props.data.respCertNo" />
    <nut-cell title="发证日期" :desc="props.data.respCertStartDate" />
    <nut-cell title="到期日期" :desc="props.data.respCertEndDate" />
    <nut-cell title="证件地址" :desc="props.data.respCertAddrDet"></nut-cell>
    <option-select v-if="props.merType === '1'"
      :model-value="props.data.isSpecContact"
      title="联系人是否是经营者本人"
      readonly
      :options="isOptions"
    />
  </nut-cell-group>
  <nut-skeleton
    v-else
    width="250px"
    height="15px"
    animated
    row="3"
  />
</template>

<style lang="sass" scoped>
.desc
  width: 200px
</style>
